:root{
  --brandP:#345bd6;
  --brandS:#3e7ee4;
  --brandA:#f2d025;
  --ink:#0d1b3a;
  --inkSub:#405275;
  --white:#fff;

  /* safe-bottom (evita ficar atrás da barra do Windows / iOS safe area) */
  --safe-bottom: max(env(safe-area-inset-bottom), 0px);
}

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(800px 500px at 12% -5%, rgba(62,126,228,.20) 0%, rgba(62,126,228,0) 55%),
    radial-gradient(900px 600px at 88% 0%, rgba(242,208,37,.22) 0%, rgba(242,208,37,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  color:var(--ink);
  box-sizing: border-box;
}

.glass{
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(13,27,58,.10);
}

.card{background:#fff; border:1px solid rgba(10,15,40,0.08);}
.soft-shadow{box-shadow:0 10px 30px rgba(0,0,0,0.15);}

.hover-rise{
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.hover-rise:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,0.18);
}

.btn-primary{
  background-image:linear-gradient(90deg, var(--brandP), var(--brandS));
  color:#fff;
  border:1px solid rgba(62,126,228,.6);
}
.btn-ghost{
  background:rgba(62,126,228,.10);
  border:1px solid rgba(62,126,228,.30);
  color:var(--ink);
}
.btn-accent{background:var(--brandA); color:#1a1a1a;}
.badge-accent{background:var(--brandA); color:#111827;}

.chip-blue{
  background:rgba(62,126,228,.12);
  color:#1f3f87;
  border:1px solid rgba(62,126,228,.25);
}
.chip-yellow{
  background:rgba(242,208,37,.18);
  color:#6a5600;
  border:1px solid rgba(242,208,37,.45);
}

.break-anywhere{overflow-wrap:anywhere; word-break:break-word;}

.seg-btn{
  border:1px solid rgba(13,27,58,.15);
  padding:.35rem .7rem;
  border-radius:9999px;
  font-size:.75rem;
  transition:all .2s ease;
}
.seg-btn.active{
  background:linear-gradient(90deg, var(--brandP), var(--brandS));
  color:#fff;
  border-color:rgba(62,126,228,.8);
  box-shadow:0 0 0 3px rgba(62,126,228,.18);
}
.seg-btn.inactive{
  background:transparent;
  color:#1f3f87;
  border-color:rgba(62,126,228,.35);
}

.pager-btn{border:1px solid rgba(13,27,58,.15); background:rgba(13,27,58,.02);}
.pager-btn.active{
  border-color:rgba(242,208,37,.7);
  background:var(--brandA);
  color:#1a1a1a;
}

/* Toast */
.toast{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:60;
  background:#10b981;
  color:#fff;
  padding:12px 20px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(16,185,129,.25);
  transform:translateX(400px);
  opacity:0;
  transition:all .3s ease;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
}
.toast.show{transform:translateX(0); opacity:1;}

/* Scrollbar personalizada */
.custom-scroll::-webkit-scrollbar{width:6px;}
.custom-scroll::-webkit-scrollbar-track{background:rgba(0,0,0,.05); border-radius:3px;}
.custom-scroll::-webkit-scrollbar-thumb{background:rgba(62,126,228,.3); border-radius:3px;}
.custom-scroll::-webkit-scrollbar-thumb:hover{background:rgba(62,126,228,.5);}

/* Prevenir scroll da página quando dentro das áreas de scroll */
.scroll-container{
  overscroll-behavior: contain;
}

/* Nav hover/active */
.nav-btn-hover-active{
  transition: background-color 0.2s, color 0.2s;
}
.nav-btn-hover-active:hover,
.nav-btn-hover-active.is-active{
  background: var(--brandA) !important;
  color: #1a1a1a !important;
}

/* =========================================================
   FIX VIEWPORT (SEM SUBIR O RODAPÉ)
   - NÃO cria espaço no body (não empurra o footer pra cima)
   - safe-area fica só no footer e nos botões FIXOS
   ========================================================= */

html, body{ height:auto; }

/* garante que não existe “spacer” empurrando o layout */
body::after{
  content: none !important;
  display: none !important;
  height: 0 !important;
}

/* Footer: mais fino + safe-bottom sem alterar altura do layout acima */
footer{
  margin-bottom: 0 !important;
  padding-bottom: calc(2px + var(--safe-bottom)) !important; /* <= afina aqui (2px base) */
  padding-top: 6px !important;                              /* <= afina aqui também */
}

/* Toast sobe com safe-bottom */
.toast{
  bottom: calc(20px + var(--safe-bottom)) !important;
}

/* WhatsApp sobe com safe-bottom (seu botão está inline; forço via seletor) */
a[title="Fale conosco no WhatsApp"]{
  bottom: calc(20px + var(--safe-bottom)) !important;
}